.single_red_bg{
	width: 564rpx;
	// height: 776rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #FE4444 0%, #FE4444 100%);
	border-radius: 18px;
	font-size: 24rpx;
	line-height: 26rpx;
	color: rgba(242, 232, 129, 0.8);
	.single_title{
		width: 308rpx;
		height: 50rpx;
		margin: 0 auto;
		margin-bottom: 36rpx;
	}
	.red_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.red_box{
			width: 168rpx;
			height: 208rpx;
			position: relative;
			// margin-right: 14rpx;
			margin-bottom: 14rpx;
			&:nth-child(3n+3){
				margin-right: 0;
			}		
			.front,.back{
				width: 168rpx;
				height: 208rpx;
				display: block;
				position: absolute;
			    top: 0;
			    left: 0;
				backface-visibility:hidden;
				image{
					width: 168rpx;
					height: 208rpx;
					display: block;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			.back{
				transform: rotateY(180deg);
				text-align: center;
				.bag_moeny{
					position: relative;
					z-index: 9;
					color: $color;
					padding-top: 160rpx;
				}
			}
			
		}
		
	}
	.btn{
		width: 560rpx;
		height: 78rpx;
		background: rgba(251, 229, 101, 1);
		color: $color;
		font-size: 32rpx;
		line-height: 78rpx;
		transition: auto;
		margin: 0 auto;
	}
	.specifition{
		margin: 10rpx 0;
	}
	.back_moeny{
		text-align: center;
		margin-top: 20rpx;
	}
	.animat{
		position:relative;
		animation:myrotate .5s 1;
		-webkit-animation:myrotate .5s 1; 
		animation-direction:alternate;
		animation-timing-function: ease; 
		-webkit-animation:myrotate .5s 1;
		-webkit-animation-direction:alternate;
		-webkit-animation-timing-function: ease; 
		transform-style: preserve-3d;
		perspective: 500;
		transform: rotateY(-180deg);
	}
	.animatreseve{
		position:relative;
		animation:myrotatereseve .5s 1;
		-webkit-animation:myrotatereseve .5s 1; 
		animation-direction:alternate;
		animation-timing-function: ease; 
		-webkit-animation:myrotatereseve .5s 1;
		-webkit-animation-direction:alternate;
		-webkit-animation-timing-function: ease; 
		transform-style: preserve-3d;
		perspective: 500;
		// transform: rotateY(180deg);
	}
		@keyframes myscale
		{
			0%{
			transform: scale(1);
			}
			25%{
				transform: scale(1.1);
			}
			50%{
				transform: scale(1.5);
			}
			75%{
				transform: scale(2);
			}
			100%{
				transform: scale(2.5);
			}
		}
		@keyframes myrotate
		{
			0%{
				transform: rotateY(0deg);
			}
			25%{
				transform: rotateY(45deg);
			}
			50%{
				transform: rotateY(90deg);
			}
			75%{
				transform: rotateY(135deg);
			}
			100%{
				transform: rotateY(180deg);
			}
		}
		@keyframes myrotatereseve
		{
			0%{
				transform: rotateY(-180deg);
			}
			25%{
				transform: rotateY(-135deg);
			}
			50%{
				transform: rotateY(-90deg);
			}
			75%{
				transform: rotateY(-45deg);
			}
			100%{
				transform: rotateY(0deg);
				
			}
		}
}

.many_red_bg{
	width: 478rpx;
	height: 678rpx;
	position: relative;
	.bg_img{
		width: 478rpx;
		height: 678rpx;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
}
.success_red_bg{
	background: #fff;
	width: 482rpx;
	padding: 40rpx;
	border-radius: 20px;
	.gift_success{
		width: 164rpx;
		margin: 0 auto;
	}
	.rank_text{
		color: #0A0C0D;
		text-align: center;
		padding-top: 30rpx;
	}
	.con_text{
		color: #5F5F5F;
		font-size: 28rpx;
		line-height: 48rpx;
		margin-top: 30rpx;
	}
	.many_close{
		left: 260rpx;
	}
	.jump_btn{
		width: 370rpx;
		height: 72rpx;
		background: #F54642;
		color: #fff;
		border-radius: 18px;
		line-height: 72rpx;
		font-size: 28rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 54rpx;
	}
}
.many_close{
	width: 54rpx;
	height: 54rpx;
	display: block;
	position: absolute;
	bottom: -60px;
	left: 210rpx;
	z-index: 999;
}
.rank_text{
	color: rgba(254, 225, 175, 1);
	font-size: 26rpx;
	line-height: 28rpx;
	padding-top: 290rpx;
	position:relative;
	z-index: 999;
	text-align: center;
	text{
		font-size: 34rpx;
		line-height: 36rpx;
	}
}
.many_btn{
	width: 224rpx;
	height: 60rpx;
	position: absolute;
	z-index: 999;
	bottom: 24rpx;
	left: 128rpx;
	display: block;
}
.rule_list{
	height: 700rpx;
	.rules{
		background: $tagbackgrond;
		margin-top: 24rpx;
		padding: 28rpx 26rpx;
		position: relative;
		.title{
			text-align: left;
			font-size: 30rpx;
			font-weight: 400;
		}
		.content{
			color: $color;
			font-size: 24rpx;
			line-height: 34rpx;
		}
		image{
			width: 16rpx;
			height: 30rpx;
			position: absolute;
			right: 26rpx;
			top: 54rpx;
		}
	}
}